<template>
  <div class="contain">
    <div class="banner" @click='changeShow'>
      <img
        class="banner-img"
        :src="bannerImg"
        alt="banner"
      />
      <div class="banner-info">
        <div class="banner-title">武隆天坑地缝国家地质公园(AAAAA景区)</div>
        <div class="banner-num">
          <span class="iconsize icon icon-tupian1"></span>
          {{imgNum}}
        </div>
      </div>
    </div>
    <common-gallary 
      :imgs='imgs'
      @returnPa='closeGallary'
      v-show='showGallary'
    >
    </common-gallary>
  </div>
</template>

<script>
import CommonGallary from "common/gallary/gallary";
export default {
  name: "DetailBanner",
  components: {
    CommonGallary,
  },
  props: ['imgs','bannerImg'],
  data () {
    return {
      showGallary: false
    }
    
  },
  computed: {
    imgNum () {
      let num = 0
      for(let item in this.imgs){
        num ++
      }
      return num
    }
  },
  methods: {
    changeShow () {
      this.showGallary = true
    },
    closeGallary(){
      this.showGallary = false
    }
  }
};
</script>

<style lang="stylus" scoped>
.contain
  display flex  
  .banner
    position relative
    overflow hidden
    width 100%
    height 3.8rem

    .banner-img
      width 100%
      height 100%

    .banner-info
      display flex
      position absolute
      left 0
      right 0
      bottom 0.06rem
      height 0.4rem
      color #ffffff

      // background-color red
      .banner-title
        flex 1
        margin 0.05rem 0.2rem
        text-align left
        font-size 0.26rem
        height 0.3rem
        line-height 0.3rem

      .banner-num
        background-color rgba(0, 0, 0, 0.6)
        margin 0.05rem 0.2rem
        min-width 0.9rem
        height 0.3rem
        line-height 0.3rem
        font-size 0.24rem
        border-radius 0.2rem

        .iconsize
          font-size 0.26rem
</style>